<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<head>
    <meta charset="UTF-8">
    <!-- import scripts -->
    <link href="resources/css/bootstrap.css" rel="stylesheet">
    <link href="resources/css/style.css" rel="stylesheet">
    <link href="resources/css/bootstrap-theme.min.css">
    <script src="resources/js/jquery.min.js"></script>
    <script src="resources/js/bootstrap.js"></script>
    <script src="resources/js/loginRegist.js" type="text/javascript"></script>
    <script src="resources/js/jquery.uploadifive.min.js"
            type="text/javascript"></script>
    <script src="resources/js/addDish.js"></script>

    <script src="/client_modules/angular/angular.js"></script>
    <script src="/client_modules/ng-file-upload/ng-file-upload-shim.js"></script>
    <script src="/client_modules/ng-file-upload/ng-file-upload.js"></script>
    <script src="/merchant/controllers/merchant.client.controller.js"></script>

    <link rel="stylesheet" type="text/css"
          href="resources/css/uploadifive.css">
    <title>Login&Register</title>
    <style type="text/css">
        .uploadifive-button {
            float: left;
            margin-right: 10px;
        }
        #queue {
            height: 88px;
            overflow: auto;
            margin-bottom: 10px;
            padding: 0 3px 3px;
            width: 150px;
        }
        .remove-btn{
            background: #CCC;
            float: right;
            width: 100px;
        }
        .file-input{
            margin-bottom:0px;
        }
        .file-block img{
            width:80px;
            height:80px;

        }
        .file-block{

        }
    </style>
</head>
<body>
<div class="login-bg" >

    <!-- Form Module-->
    <div class="module form-module">
        <div class="toggle">
            <i class="fa fa-lg fa-times fa-pencil"></i>
        </div>
        <form class="form" ng-controller="merchantLoginController" name="loginForm" ng-submit="Login(loginForm.$valid)" novalidate>
            <h2>Login to your account</h2>

            <input type="text" placeholder="Username/Phone Number..." ng-model="login.mname" name="name" required/>
            <span style="color:red" ng-show="!loginForm.name.$pristine && loginForm.name.$invalid">
                <span ng-show="loginForm.name.$error.required">User name is required</span>
            </span>
            <input type="password" placeholder="Password..." ng-model="login.password" name="pwd" required/>
            <span style="color:red" ng-show="!loginForm.pwd.$pristine && loginForm.pwd.$invalid">
                <span ng-show="loginForm.pwd.$error.required">Password is required</span>
            </span>

            <button ng-disabled="loginForm.$invalid">Login</button>
            <span class="alert alert-danger al" role="alert" id="loginErro" ng-bind="loginError" ng-show="exist == true"></span>

        </form>
        <form class="form" ng-controller="merchantRegistController" name="registerForm" ng-submit="registerSubmit(registerForm.$valid)" novalidate>
            <h2>Create an account</h2>

                <input type="text" placeholder="Username" ng-model="mname" name = "mname" ng-blur="checkUserName()" required/>
                <span style="color:red" ng-show="registerForm.mname.$invalid && !registerForm.mname.$pristine">
                    <span ng-show="registerForm.mname.$error.required">User name is required</span>
                </span>
                <span style="color:red">{{nameError}}</span>
                <!--<div class="alert alert-danger al" role="alert" id="mNameError"></div>-->
                <input type="text" placeholder="Phone Number" ng-model="mtel" ng-pattern="/^(13[0-9]|15[0|1|3|6|7|8|9]|18[8|9])\d{8}$/" name="mtel" required/>
                <span style="color:red" ng-show="registerForm.mtel.$invalid && !registerForm.mtel.$pristine">
                    <span ng-show="registerForm.mtel.$error.required">Phone Number is required</span><br>
                    <span ng-show="registerForm.mtel.$error.pattern">Invalid phone number</span>
                </span>
                <!--<div class="alert alert-danger al" role="alert" id="mTelError"></div>-->
                <input type="password" placeholder="Password" ng-model="password" ng-minlength="3" name = "password" required/>
                 <span style="color: red" ng-show="registerForm.password.$invalid && !registerForm.password.$pristine">
                        <span ng-show="registerForm.password.$error.minlength">Password length can't less than 3 characters</span>
                    </span>
                <!--<div class="alert alert-danger al" role="alert" id="passwordError"></div>-->
                <input type="password" placeholder="Password Confirm" ng-model="repassword" name = "repassword" required/>
                <span style="color: red" ng-show="registerForm.password.$valid && !registerForm.password.$pristine">
                        <span ng-show="repassword!=password">Passwords are not consistent</span>
                    </span>
                <!--<div class="alert alert-danger al" role="alert" id="repasswordError"></div>-->
                <input type="text" placeholder="Address" ng-model="address" name = "address" required/>
                <span style="color:red" ng-show="registerForm.address.$invalid && !registerForm.address.$pristine">
                <span ng-show="registerForm.address.$error.required">Address is required</span>
                </span>
                <!--<div class="alert alert-danger al" role="alert" id="addressError"></div>-->
                <select class="sel" ng-model="type"
                        placeholder="Merchant Type">
                    <option value="1">Fast Food</option>
                    <option value="2">Special Food</option>
                    <option value="3">Western Food</option>
                    <option value="4">Refreshment</option>
                    <option value="5">Dessert</option>
                    <option value="6">Fruit</option>
                </select>
               <div class="col-md-7 file-block">
            <input type="file" ngf-select ng-model="file"
                   accept="image/*" ngf-max-size="2MB" required
                   ngf-model-invalid="errorFile" class="file-input">
            <img ng-show="form.file.$valid" ngf-thumbnail="file" class="" style="width: 80px;height: 80px;">
                <button class="remove-btn" ng-click="file = null" ng-show="file" style="float: right;width: 25px;height: 25px;margin: 54px 106px 16px 0;border-radius: 5px;text-align: center;padding: 0px;
    background-color: #ccc;"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
            </div>

            <br>
            <span ng-show="file.result">Upload Successful</span>
            <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
            <button type="submit" ng-disabled="registerForm.$invalid">Register</button>
        </form>
    </div>

</div>


</body>

<script>
    // Toggle Function: CSS style control
    $('.toggle').click(function() {
        // Switches the Icon
        $(this).children('i').toggleClass('fa-pencil');
        // Switches the forms
        $('.form').animate({
            height : "toggle",
            'padding-top' : 'toggle',
            'padding-bottom' : 'toggle',
            opacity : "toggle"
        }, "slow");
    });
</script>
</html>